<template>
  <div style="width:100%;height: 100%;display: flex;justify-content: center;align-items: center">
    <Input
      v-model:value="value"
      style="width:100%;height:100%;"
      placeholder="请选择物料"
      allowClear
      @click="onClick"
      @clear="onClear"
    />
    <PurchaseBom ref="purchaseBomRef" @share-data="ModelClose" />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import { Input } from 'ant-design-vue';
import PurchaseBom from './purchaseBom.vue';

export default defineComponent({
  components: {
    Input,
    PurchaseBom,
  },
  props: {
    params: Object,
  },
  setup(props) {
    const purchaseBomRef = ref(null);
    const value = ref(props.params?.value ?? '');
    const isClearEvent = ref(false);

    const getValue = () => value.value;

    const onClear = (e) => {
      props.params.data.sku_id = 0;
      isClearEvent.value = true;
    };

    const onClick = () => {
      // 调用子组件暴露的openModal方法
      purchaseBomRef.value?.openModal();
    };

    const ModelClose = (row) => {
      value.value = row.material.material_name;
      props.params.data.sku_id = row.id;
      props.params.data.price = row.material.price;
      props.params.data.supply_id = row.supply.id;
      props.params.data.supply_name = row.supply.SupplyNa;

      props.params.api.stopEditing();
    };

    onMounted(() => {
      // 可以在这里执行挂载时的逻辑
    });

    return {
      purchaseBomRef,
      value,
      isClearEvent,
      getValue,
      onClear,
      onClick,
      ModelClose,
    };
  },
});
</script>

<style scoped>
input {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
</style>
